<template>
  <HeaderComponent />
  <div class="taste-home-container">
    <div class="search-container">
      <SearchComponent  @search="handleSearch"/>
    </div>
    <CarouselComponent />
  </div>
  <div class="main-content">
  </div>
</template>

<script>
import HeaderComponent from '../components/HeaderComponent.vue';
import CarouselComponent from '../components/CarouselComponent.vue';
import SearchComponent from '../components/SearchComponent.vue';

export default {
  name: 'TasteHome',
  components: {
    HeaderComponent,
    CarouselComponent,
    SearchComponent,
  },
  methods: {
    handleSearch(query) {
      this.$router.push({ name: 'DishList', query: { q: query } });
    },
    // handleSearch(query) {
    //   this.$router.push({ path: '/dish-list', query: { q: query } });
    //   console.log(query);
    // },
  },
};
</script>

<style scoped>
.taste-home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0; /* 添加内边距 */
}
.main-content{
  padding: 10px;
  background-color: #f9f9f9;
}
main {
  padding: 0;
  text-align: center;
  max-width: 800px; /* 设置最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

/* 添加搜索框容器样式 */
.search-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 20px 0; /* 增加上下间距 */
}

h1 {
  margin-bottom: 10px; /* 增加下边距 */
}

p {
  margin-top: 0;
  color: #555; /* 改变文字颜色 */
}

/* 响应式设计 */
@media (max-width: 600px) {
  .taste-home-container {
    padding: 10px; /* 在小屏幕上减少内边距 */
  }
  main {
    padding: 0 20px; /* 在小屏幕上增加左右内边距 */
  }
}
</style>
